<template>
	<view class="main">
		<!-- <view class="hand">
			<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//dbleft.png" @click="blackbtn"></image>
		</view> -->
		<tou_hand1 handtitle='站点报装'></tou_hand1>
		<view class="show">
			<view class="sone">
				<view class="soneleft">联系人<span style='color: red;'>*</span>：</view>
				<input placeholder="请输入联系人" v-model="contact" maxlength="100" />
			</view>
			<view class="sone">
				<view class="soneleft">联系电话<span style='color: red;'>*</span>：</view>
				<input placeholder="请输入联系电话" v-model="phone" type="number" maxlength="20" />
			</view>
			<view class="sone">
				<view class="soneleft">站点位置<span style='color: red;'>*</span>：</view>
				<view class="soneright" @click="showPicker = true">{{value}}</view>
			</view>
			<view class="sone">
				<view class="soneleft">详细地址<span style='color: red;'>*</span>：</view>
				<input placeholder="请输入详细地址" v-model="address" maxlength="100" />
			</view>
			<view class="sone">
				<view class="soneleft" style="width: 43%;">身份选择<span style='color: red;'>*</span>：</view>
				<van-collapse :value="identity" @change="clickIdentity">
					<van-collapse-item :title=reason name="1" :title-class="classtap">
						<van-radio-group v-model="radio1" @change="gobtn">
							<van-radio name="社区街道">社区街道</van-radio>
							<van-radio name="物业公司">物业公司</van-radio>
							<van-radio name="小区住户">小区住户</van-radio>
							<van-radio name="场地业主">场地业主</van-radio>
							<van-radio name="其他">其他</van-radio>
						</van-radio-group>
					</van-collapse-item>
				</van-collapse>
			</view>
			<view class="sone1">
				<view class="soneleft1">备注：</view>
				<view class="kthreefoot">
					<van-field :value="remarks" @change="changeRemarks" rows="2" autosize type="textarea"
						maxlength="150" placeholder="请输入备注" />
				</view>
			</view>
			<view class="stwo" @click="tjbtn">
				提交
			</view>
			
			<van-popup :show="showPicker" round position="bottom">
				<van-picker show-toolbar :columns="columns" value-key="name" @cancel="showPicker = false"
					@confirm="onConfirm" @change="onAreaChange" />
			</van-popup>
		</view>

	</view>
</template>

<script>
	import tou_hand1 from '../../components/tou_hand2/tou_hand2.vue'
	import {
		Config
	} from '../../common/Config.js'
	export default {
		components: {
			tou_hand1
		},
		mounted() {

		},

		data() {
			return {
				value: '请选择城市',
				showPicker: false,
				columns: [], //省市区内容
				code: "", //省市的区域编码
				radio1: '', //身份选择
				contact: "", //联系人
				phone: "", //联系电话
				address: "", //详细地址
				remarks: "", //备注
				identity: [''],
				reason: '请选择身份',
				classtap: 'tclass'
			}
		},
		onLoad() {
			this.adress();
		},
		methods: {
			// 获取省/市/区
			adress() {
				this.$base.request1('workUnit/', 'GET')
					.then(res => {
						var arealist = res.data.data;
						let columns = [{
							values: arealist
						},
						{
							values:arealist[0]['children'],
							defaultIndex: 0
						},
						{
							values:arealist[0]['children'][0]['children'],
							defaultIndex: 0
						},
						];
						this.columns = columns;
					})
					.catch(err => {

					})
			},
			//返回上一页
			blackbtn() {
				uni.navigateBack()
			},
			
			//选择
			onAreaChange(e) {
				console.log(e);
				const {
					picker,
					value,
					index
				} = e.detail;
				if (index === 0) {
					// 修改省
					picker.setColumnValues(1, value[0].children);
					picker.setColumnValues(2, value[0].children[0].children);
				} else if (index === 1) {
					// 修改市
					picker.setColumnValues(2, value[1].children);
				}
			},

			//选择省市区确认按钮
			onConfirm(e) {
				console.log(e);
				let value = e.detail.value
				let addr_value = value[0].name+' '+value[1].name+' '+value[2].name;
				console.log(addr_value);
				this.code = value[2].code
				this.value = addr_value;
				this.showPicker = false;
				console.log(this.code);
			},
			//提交审核
			tjbtn() {
				if (!this.code || !this.contact || !this.phone || !this.address || !this.radio1) {
					this.$toast.fail('请完善信息')
					return
				}
				let data = {
					code: this.code,
					contact: this.contact,
					phone: this.phone,
					address: this.address,
					remarks: this.remarks,
					identity: this.radio1

				}

				this.$base.request('chargeSite/apply', 'POST', data)
					.then(res => {
						if (res.data.code == 200) {
							this.$toast.success(res.data.msg)
							uni.navigateBack();
						} else {
							this.$toast.fail(res.data.msg)
						}
					})
					.catch(err => {

					})
			},

			gobtn(event) {
				this.reason = this.radio1 = event.mp.detail;
				this.activeNames = ['']
				this.classtap = 'tclass1'
				this.identity = false;
			},
			//身份选择
			clickIdentity(event) {
				console.log(event.mp.detail);
				this.identity = event.mp.detail;
			},
			changeRemarks(event) {
				this.remarks = event.mp.detail;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		height: 100vh;
		background-color: #2A3034;
		overflow-x: hidden;

		.show {
			width: 100%;
			box-sizing: border-box;
			padding: 20upx 36upx;

			/deep/.van-picker__toolbar {
				.van-picker__confirm {
					border: 0upx solid;
					background-color: #FFFFFF;
				}

				.van-picker__cancel {
					border: 0upx solid;
					background-color: #FFFFFF;
				}
			}

			.sone {
				width: 100%;
				border-bottom: 1upx solid #4A4E52;
				display: flex;
				box-sizing: border-box;
				padding: 30upx 0;
				align-items: center;
				background-color: #2A3034;

				/deep/.tclass {
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #999999;
				}

				/deep/.van-collapse-item__content {
					margin-left: 0upx;
					background-color: #4A4E52;
				}

				/deep/.tclass1 {
					font-size: 28upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 700;
					color: #AFB0B0;
					margin-left: 52upx;
				}

				/deep/.van-hairline--top-bottom::after {
					border-width: 0;
				}

				/deep/.van-cell:not(:last-child)::after {
					border-bottom: 0upx solid #FFFFFF;
				}

				/deep/.van-cell {
					padding: 18upx 0upx;
					background-color: #2A3034;
				}

				/deep/.van-radio__label {
					font-size: 28upx;
					font-family: PingFang SC Bold, PingFang SC Bold-Bold;
					font-weight: 700;
					color: #fff;
				}

				/deep/.van-collapse {
					width: 100%;

				}

				/deep/.van-radio__icon {
					/deep/.van-icon {
						width: 20upx;
						height: 20upx;
						border: 1upx solid #cccccc;
					}
				}

				/deep/.van-radio {
					// margin-bottom: 15upx;
					height: 70upx;
					align-items: center;
				}

				.soneleft {
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #D0D0D0;
					width: 29.2%;
				}

				.soneright {
					font-size: 24upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #999999;
				}

				input {
					font-size: 24upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #fff;
				}

				/deep/.uni-input-placeholder {
					color: #AFB0B0;
				}

				textarea {
					font-size: 24upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					width: 60.5%;
					color: #fff;
					height: 158upx;
					box-sizing: border-box;
				}

			}

			.sone1 {
				.soneleft1 {
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #D0D0D0;
					width: 29.2%;
					margin-top: 20upx;
				}

				.kthreefoot {
					box-sizing: border-box;
					margin-top: 21upx;

					/deep/.van-cell {
						background-color: #3A4044;
						height: 236upx;
						border-radius: 16upx;
					}

					/deep/.van-field__control {
						color: #AFB0B0;
					}
				}
			}

			.stwo {
				width: 686upx;
				border-radius: 50upx;
				background-color: #8DC321;
				font-size: 32upx;
				font-family: PingFang SC Bold, PingFang SC Bold-Bold;
				font-weight: 700;
				text-align: center;
				padding: 30upx 0;
				margin: 0 auto;
				color: #ffffff;
				margin-top: 50upx;
			}
		}

	}
</style>